<!DOCTYPE html>
<html>
<head>
	<title>input</title>
	<meta charset="utf-8" />
	<script type="text/javascript" src='./js/jquery-1.11.0.min.js'></script>
	<style type="text/css">
		*{padding: 0;margin: 0;}

		.search-box{
			width: 500px;
			height: 50px;
			background: #efefef;
			border: 1px solid #efeffe;
			position: relative;
			top: 0;
			left: 0;
			z-index: 100;
			margin-bottom: 20px;
		}
		.search-box input{
			width: 80%;
			height: 48px;
			border: 0;
		}
		.search-box b{
			width: 20%;
			text-align: center;
			line-height: 50px;
			float: right;
		}
		.searched{
			width: 80%;
			height: 48px;
			line-height: 48px;
			border: 0;
			position: absolute;
			left: 1px;
			top: 1px;
			background: #ee9;
		}
		.com-2{
			height: 30px;
			line-height: 30px;
			padding: 0 3px;
			box-sizing: border-box;
			display: inline-block;
			background: #efeffe;
			border-radius: 5px;
			cursor: pointer;
			margin-right: 5px;
		}
		.com-2 span{
			/*padding-right: 22px;*/
		}
		.com-2 .del-i{
			position: relative;
			z-index: 101;
			top : 6px;
			right: 0;	
			width: 20px;
			height: 20px;
			float: right;
			/*border: 1px solid #000;*/
		}
		.com-2 .del-i i{
			width: 20px;
			height: 2px;
			background: #000;
			display: inline-block;
			position: absolute;
			top: 10px;
		}
		.com-2 .del-i i:first-child{
			transform: rotate(-45deg);
			/*right: 0px;*/
		}
		.com-2 .del-i i:last-child{
			transform: rotate(45deg);
			/*right: 0px;*/
		}
		.com-1{
			display: inline-block;
			padding: 2px 3px;
			background: #efeffe;
			border-radius: 5px;
			cursor: pointer;
		}
		.txt-history{
			margin-bottom: 20px;
		}
	</style>
</head>
<body>

<div class="search-box">
	<input type="text" />
	<b>search</b>
	<div class="searched">
<!-- 		<div class="com-2">
			<span>chemisty</span>
			<div class="del-i">
				<i></i>
				<i></i>
			</div>
		</div>
		<div class="com-2">
			<span>phyiscs</span>
			<div class="del-i">
				<i></i>
				<i></i>
			</div>
		</div> -->
	</div>
</div>
<div class="txt-history">
	<h4>history</h4>
	<div class="his">
		
	</div>
</div>
<div class="txt-hot">
	<h4>hot</h4>
	<div class="hot-box">
		<span class="com-1">math</span>
		<span class="com-1">chinese</span>
		<span class="com-1">English</span>
		<span class="com-1">chemisty</span>
		<span class="com-1">phyiscs</span>
	</div>
</div>

<script type="text/javascript">
	
	// var seds = ['chemisty','phyiscs']
	var seds = []
	var sedHtml = ''

	var coms
	function showTips(argument) {
		console.log(seds)
		for (var i = 0; i < seds.length; i++) {
			if (i<4) {
				sedHtml += `
					<div class="com-2">
						<span>${seds[i]}</span>
						<div class="del-i">
							<i></i>
							<i></i>
						</div>
					</div>
				`
			}
		}
		seds = []
		$('.searched').html(sedHtml)
		// coms = $('.searched').find('.com-2').html()
		// console.log(coms)
	}
	showTips()	
	$('.searched').on('click','.del-i',function () {
		console.log(this)
		$(this).parent('.com-2').remove()
	})
	var hotTxt = ''
	$('.com-1').click(function () {
		hotTxt = $(this).text()
		// console.log(hotTxt)
		
		seds.push(hotTxt)
		showTips()
	})




// 去重
Array.prototype.distinct = function (){
 var arr = this,
  result = [],
  len = arr.length;
 arr.forEach(function(v, i ,arr){  //这里利用map，filter方法也可以实现
  var bool = arr.indexOf(v,i+1);  //从传入参数的下一个索引值开始寻找是否存在重复
  if(bool === -1){
   result.push(v);
  }
 })
 return result;
};

function dedupe(array){
 return Array.from(new Set(array));
}

</script>

</body>
</html>